<template>
    <div class="pd-30">
        <div class="flex">
            <div class=" center">
                <p>课程名称：</p>
                <el-input class="w-250" v-model="input" placeholder="请输入"></el-input>
            </div>
            <div class="flex ml-80">
                <el-button class="w-100" @click="chongzhi">重置</el-button>
                <el-button class="w-100" type="primary" plain @click="getUserList">搜索</el-button>
                <el-button class="w-100" type="primary" @click="addUser">新增</el-button>

            </div>
        </div>
        <div class="h-30"></div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="课程名称">
            </el-table-column>
            <el-table-column prop="pic" label="图片">
                <template #default="{ row }">
                    <img :src="row.pic" style="object-fit: cover;" class="w-80 h-80" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="xunZhangPic" label="课时勋章">
                <template #default="{ row }">
                    <img :src="row.xunZhangPic" style="object-fit: cover;" class="w-80 h-80" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="duration" label="时长">
            </el-table-column>
            <el-table-column prop="states" label="状态">
                <template #default="{ row }">
                    <p v-if="row.status == 1">正常</p>
                    <p v-else>禁用</p>
                </template>
            </el-table-column>
            <el-table-column prop="submitTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button type="primary" plain size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button size="mini" @click="getDetail(scope.row)">查看记录</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex mt-20">
            <div></div>
            <el-pagination :current-page="page" background layout="prev, pager, next" :total="total"
                @current-change="sizeChange">
            </el-pagination>
        </div>


        <el-dialog :visible.sync="dialogVisible" width="30%" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">{{ type == 1 ? '增加' : '编辑' }}课程</h4>
            </span>
            <div class="plr-30 scroll">
                <div class="flex_l">
                    <div class="w-80">课程名称：</div>
                    <el-input class="w-350 ml-20" v-model="form.name" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">图片：(推荐尺寸：110*110)</div>
                    <el-upload class="ml-20" :action="upUrl" list-type="picture-card"
                        :on-success="handlePictureCardPreview('pic')" :on-remove="handleRemove('pic')" :limit="1"
                        :file-list="imgList">
                        <!-- <i class="el-icon-plus"></i> -->
                    </el-upload>
                </div>
                
                <!-- <div class="flex_l mt-20">
                    <div class="w-80">课时勋章：</div>
                    <el-upload class="ml-20" :action="upUrl" list-type="picture-card"
                        :on-success="handlePictureCardPreview('xunZhangPic')" :on-remove="handleRemove('xunZhangPic')" :limit="1"
                        :file-list="imgList1">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </div> -->
                
                <div class="flex_l mt-20">
                    <div class="w-80">课时视频：</div>
                    <el-upload class="ml-20" :action="upUrl" list-type="picture-card"
                        :on-success="handlePictureCardPreview('videoUrl')" :on-remove="handleRemove('videoUrl')" :limit="1"
                        :file-list="imgList2">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </div>
                <div class="flex_l">
                    <div class="w-80">课时勋章：</div>
                    <el-input class="w-350 ml-20" v-model="form.xunZhangPic" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">课时时长：</div>
                    <el-input class="w-350 ml-20" v-model="form.duration" placeholder="请输入"></el-input>
                </div>

                <div class="flex_l mt-20">
                    <div class="w-80">简介：</div>
                    <!-- <el-input class="w-350 ml-20" v-model="form.content" size="small" type="textarea"
                        placeholder="请输入"></el-input> -->
                    <rich-text class="flex-1 ml-20"  ref="fueditModule"></rich-text>
                </div>
            </div>



            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible1" width="45%" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">{{ selectName }}报名列表</h4>
            </span>
            <el-table :data="tableData1" border style="width: 100%">
                <el-table-column prop="teacherName" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="per" label="进度">
                </el-table-column>
                <el-table-column prop="finishFlag" label="完成状态">
                    <template #default="{ row }">
                        <p v-if="row.finishFlag == 1">已完成</p>
                        <p v-else>未完成</p>
                    </template>
                </el-table-column>
                <el-table-column prop="submitTime" label="创建时间">
                </el-table-column>
            </el-table>
            <div class="flex mt-20">
                <div></div>
                <el-pagination :current-page="page1" background layout="prev, pager, next" :total="total1" @current-change="sizeChange">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { teacherStudyList, cusGangweiStudyList, cusGangweiStudyAdd, cusGangweiStudyEdit, cusGangweiStudyRemove } from '@/api/configure.js'
import RichText from '@/components/RichText/RichText.vue'

export default {
    name: "Label",
    components: {
        RichText
    },
    data() {
        return {
            dialogVisible: false,
            dialogVisible1: false,
            options1: [{
                value: '',
                label: '全部'
            }, {
                value: '1',
                label: '文创园地'
            }, {
                value: '2',
                label: '商品'
            }],
            input: '',
            tableData: [],
            page: 1,
            total: 0,
            upUrl: this.$upLoadUrl,
            type: '',
            form: {
                content: '',
                duration: '',
                name: '',
                pic: '',
                videoUrl: '',
                xunZhangPic: ''
            },
            selectName: '',
            tableData1: [],
            page1: 1,
            total1: 0,
            imgList: [],
            imgList1: [],
            imgList2: [],
            courseId:''
        }
    },
    mounted() {
        this.getUserList()
    },
    methods: {
        sizeChange(e) {
            this.page = e
            this.getUserList()
        },
        sizeChange1(e) {
            this.page1 = e
            this.getUserList()
        },
        getDetail(e) {
            this.dialogVisible1 = true
            this.selectName = e.name
            this.courseId = e.id
            this.getList()
            
        },
        getList(){
            teacherStudyList({
                pageNum: this.page1,
                pageSize: 10,
                courseId: this.courseId
            }).then(res => {
                this.tableData1 = res.rows
                this.total1 = res.total
            })
        },
        addUser() {
            for (var i in this.form) {
                if (i != 'pic') {
                    this.form[i] = ''
                }
            }
            this.dialogVisible = true
            this.imgList = []
            this.imgList1 = []
            this.imgList2 = []
            this.type = 1
        },
        getUserList() {
            cusGangweiStudyList({
                pageNum: this.page,
                pageSize: 10,
                name: this.input
            }).then(res => {
                this.tableData = res.rows
                this.total = res.total
            })
        },
        submit() {
            this.form.content = this.$refs.fueditModule.getHtml();

            var apiFunction = this.type == 1 ? cusGangweiStudyAdd : cusGangweiStudyEdit
            apiFunction(this.form).then(res => {
                if (res.code == 0) {
                    this.dialogVisible = false
                    this.getUserList()
                    this.$message({
                        message: this.type == 1 ? '添加成功' : '修改成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.msg || '失败');
                }
            })
        },


        chongzhi() {
            this.input = ''
            this.getUserList()
        },

        handleEdit(e, type) {
            for (var i in this.form) {
                this.form[i] = type[i]
            }
            this.form.id = type.id
            this.dialogVisible = true
            this.imgList = [{name:'1',url:type.pic}]
            this.imgList1 = [{name:'1',url:type.xunZhangPic}]
            this.imgList2 = [{name:'1',url:type.videoUrl}]
            // this.form.pic = type.pic
            // this.form.xunZhangPic = type.xunZhangPic
            // this.form.videoUrl = type.videoUrl

            setTimeout(res=>{
                    this.$refs.fueditModule.setHtml(type.content);
                },100)
            this.type = 2
        },

        handleDelete(e, type) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                cusGangweiStudyRemove({ ids: type.id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getUserList()
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        handleRemove(type) {
            return (file, fileList) => {
                this.form[type] = ''
            };
        },
        handlePictureCardPreview(type) {
            console.log( type)
            return (response, file) => {
                this.form[type] = response.list[0].url
            };
        }
    }
}
</script>